<template>
    <div class="container">
        <div class="header">
            <van-icon name="arrow-left" @click="back" class="header-left" size="30" />
            填写服务订单
        </div>
        <stateBar item="0" />
        <van-cell class="cell">
            <template #title>
                <van-image width="25px" 
                height="25px"
                :src="createInfo.service.serviceImg"
                />
                <span class="server-name">{{ createInfo.service.name }}</span>
            </template>
            <template #default>
                <div class="service-text">服务内容</div>
            </template>
        </van-cell>
        <van-cell-group class="cell" >
            <van-cell >
                <template #title>就诊医院</template>
                <template #default>
                    <div @click="showHospital=true" >
                        {{ form.hospital_name || '请选择' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <van-cell >
                <template #title>就诊时间</template>
                <template #default>
                    <div @click="showStartTime=true" >
                        {{ currentDate  || '请选择就诊时间' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <van-cell >
                <template #title>陪诊师</template>
                <template #default>
                    <div @click="showCompanion=true" >
                        {{ companionName  || '请选择陪诊师' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <van-cell >
                <template #title>接送地址</template>
                <template #default>
                    <van-field
                    class="text"
                    input-align="right"
                    v-model="form.receiveAddress"
                    placeholder="请输入接送地址"
                    />
                </template>
            </van-cell>
            <van-cell >
                <template #title>联系电话</template>
                <template #default>
                    <van-field
                    class="text"
                    input-align="right"
                    v-model="form.tel"
                    placeholder="请输入联系电话"
                    />
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell-group title="服务需求" class="cell"> 
            <van-field
                    class="text"
                    style="height: 100px;"
                    v-model="form.demand"
                    placeholder="请简单描述您要就诊的科室"
                    />
        </van-cell-group>
        <van-button class="submit" type="primary" @click="submit" size="large">提交订单</van-button>

        <van-popup
        v-model:show="showHospital"
        position="bottom"
        :style="{ height: '30%' }"
        >
        <van-picker
            :columns="showHospitalCol"
            @confirm="handleHospitalConfirm"
            @cancel="showHospital = false"
            />
        </van-popup>

        <van-popup
        v-model:show="showStartTime"
        position="bottom"
        :style="{ height: '30%' }"
        >
        <van-date-picker
            title="选择时间"
            :min-date="minDate"
            @confirm="handleTimeConfirm"
            @cancel="showStartTime = false"
            />
        </van-popup>

        <van-popup
        v-model:show="showCompanion"
        position="bottom"
        :style="{ height: '30%' }"
        >
        <van-date-picker
            title="选择陪诊师"
            :columns="showCompanionCol"
            @confirm="handleCompanionConfirm"
            @cancel="showCompanion = false"
            />
        </van-popup>
        <!-- 支付二维码 -->
        <van-dialog
        v-model:show="showPay"
        >
        <van-icon name="cross" class="close" @click="closePay"></van-icon>
        <div>微信支付</div>
        <van-image width="150px" height="150px" :src="codeImg"></van-image>
        <div>请使用微信扫码支付</div>
    
    </van-dialog>
    </div>
</template>
<script setup>
import { onMounted, ref,computed } from 'vue';
import { useRouter } from 'vue-router';
import stateBar from '../components/stateBar.vue';
import { getCurrentInstance, reactive } from 'vue'
import { showNotify } from 'vant';
import Qrcode from 'qrcode'

// 获取当前vue实例
const { proxy } = getCurrentInstance()
const router = useRouter();

onMounted(async() => {
    const {data} = await proxy.$api.h5Companion()
    Object.assign(createInfo,data.data)
})

const createInfo = reactive({
    companion:[],
    hospitals:[],
    service:{}
})

const showHospital = ref(false)

const showHospitalCol = computed(() => { 
    return createInfo.hospitals.map(item => { 
        return {text:item.name,value : item.id}
    })
})

const form = reactive({

})

const handleHospitalConfirm = (item) => { 
    console.log(item)
    form.hospital_id = item.selectedOptions[0].value
    form.hospital_name = item.selectedOptions[0].text
    showHospital.value = false
}

//选择就诊时间

const showStartTime = ref(false)
const currentDate = ref()
const minDate = ref(new Date())

const handleTimeConfirm = (item) => { 
    const date = item.selectedValues.join('-')
    console.log(date,'datestr')
    currentDate.value = date
    form.starttime = new Date(date).getTime()
    console.log(form.starttime,'form.starttime')
    console.log(currentDate,'currentDate')
    showStartTime.value = false
}

const showCompanion = ref(false)
const showCompanionCol = computed(() => { 
    return createInfo.companion.map(item => {
        return {
            text: item.name,
            value: item.id
        }
    })
})

const companionName = ref('')
const handleCompanionConfirm = (item) => { 
    form.companion_id = item.selectedOptions[0].value
    companionName.value = item.selectedOptions[0].text
    showCompanion.value = false
}

// 支付弹窗
const showPay = ref(false)
const codeImg = ref('')


const closePay = () => { 
    showPay.value = false
    router.push('/order')
}

const submit = async () => { 
    const params = [
        'hospital_id',
        'hospital_name',
        'demand',
        'companion_id',
        'receiveAddress',
        'tel',
        'starttime'
    ]
    for(const item of params){
        if(!form[item]){
            showNotify({ message: '请填写完整信息' });
            return 
        }
    }
    const {data: orderRes } = await proxy.$api.createOrder(form)
    console.log(orderRes)
    Qrcode.toDataURL(orderRes.data.wx_code).then(url => { 
        showPay.value = true
        codeImg.value = url
    })
}



const back = () => {
    router.go(-1);
}

</script>
<style lang="less" scoped>
.container {
    background-color: #f0f0f0;
    height: 100vh;
}

.header {
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 15px;

    .header-left {
        float: left;
    }
}

.cell {
    width: 95%;
    margin: 5px auto;
    background-color: #fff;

    ::v-deep(.van-field__control) {
        color: var(--van-cell-value-color);
    }

    ::v-deep(.van-cell__title) {
        display: flex;
        align-items: center;
    }

    .server-name {
        margin-left: 10px;
    }
}

.service-text {
    background: url() no-repeat center center;
    background-size: 20px;
}

.submit {
    position: absolute;
    bottom: 0;
}

::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
        position: absolute;
        left: 20px;
    }
}
</style>